
import {PolymerElement, html} from 'https://unpkg.com/@polymer/polymer/polymer-element.js?module';



class OwlSlides extends PolymerElement {


    constructor(){

        super();

        this.playerNum=0;
        this.playWidth=0;
        this.parentWidth="0px";
        this.currentNum=0;
        this.beforePos=0;
        this.isback=false;
        this.autoPlay=this._autoPlay.bind(this);
    }

    ready(){

        super.ready();
        console.log(this.loop);
        this.parentWidth=this.parentNode.offsetWidth;
        this.playWidth=this.parentWidth;
        let domlist=this.shadowRoot.querySelector("#content").assignedNodes({flatten:false});
        console.log(domlist);
        let _count=(domlist.length-1)/2;
        this.playerNum=_count;
        let currentWidth=domlist[1].children[0].offsetWidth;

        for(let i=1;i<domlist.length;i+=2){
            domlist[i].children[0].style.width=this.parentWidth+'px';
        }
        let _height=-(domlist[1].children[0].offsetHeight)+'px';
        let offwidth=domlist[1].children[0].offsetWidth;
        this.$.slidesContent.style.width=offwidth*(_count)+'px';

        if(this.showpager=='true'){

            this.$.slidesPager.style.display="block";
            if(this.pagertype=="rect"){

                this.$.slidesPager.children[0].style.borderRadius='0px';
            }
        }else{

            this.$.slidesPager.style.display="none";
        }

        for(let i=1;i<_count;i++){

            let _pager=this.$.slidesPager.children[0].cloneNode();
            this.$.slidesPager.appendChild(_pager);
        }
        this._initPagerPosition(_count,28);
        this._changePager(0,this);
    }

    connectedCallback(){

        super.connectedCallback();
        this.addEventListener('click',this.toggle);
        let duration = this.speed;
        if(duration<1000){

            duration=1000;
        }else if(duration>8000){

            duration=3000;
        }
        setInterval(this.autoPlay,duration);

    }
    static get properties() { return {
        mood: {

            type: String,
            value: "",
            observer:"_moodChange"
        },
        flag:{

            type:Boolean,
            value:false
        },
        showpager:{

            type:String,
            value:'false'
        },
        speed:{

            type:Number,
            value:3000
        },
        pagertype:{

            type:String,
            value:'round'
        },
        loop:{

            type:String,
            value:'true'
        }

    }};


    _moodChange(newValue,oldValue){


    }

    _initPagerPosition(count,width){

        let _width=width*count;
        this.$.slidesPager.style.width=_width+'px';
        this.$.slidesPager.style.left="50%";
        this.$.slidesPager.style.marginLeft=(-_width/2)+'px';
    }

    _autoPlay(){

        let that =this;
        let time=null;
        let aimPos=0;

        if(this.currentNum==this.playerNum-1||this.isback){

            aimPos=-((that.currentNum-1) * that.playWidth);
            this.isback=true;

            if(this.currentNum==0){

                this.isback=false;
                aimPos=-((that.currentNum+1) * that.playWidth);
            }

        }else {

            aimPos=-((that.currentNum+1) * that.playWidth);

        }


        let speed=(this.beforePos)+0;
        this.beforePos=aimPos;

        time=setInterval(()=>{

            if(that.currentNum>=0&&that.currentNum<=(that.playerNum-1)) {
                that.$.slidesContent.style.marginLeft = speed + 'px';

            }
            if(speed<=aimPos&&!that.isback){

                that.currentNum++;
                this._changePager(this.currentNum,that);
                clearInterval(time);

            }

            if(that.isback&&speed>=aimPos){

                that.currentNum--;
                this._changePager(this.currentNum,that);
                clearInterval(time);
            }
            if(that.isback){

                speed+=4;
            }else{

                speed-=4;
            }


        },4);
    }

    _changePager(count,that){


        for(let i=0;i<this.playerNum;i++){

            if(count==i) {

                that.$.slidesPager.children[i].style.backgroundColor="rgba(120,120,120,0.8)";

            }else{

                that.$.slidesPager.children[i].style.backgroundColor="rgba(255,255,255,0.8)";
            }
        }
    }

    static get template() {
        return html`
             <style>
             
              .owl-slides{
                
                  width: 100%;
                  overflow: hidden;
                  height: auto;
                  background-color: royalblue;
            
              }
              .slides-content{
              
               width: auto;
               position: static; 
               /*overflow: scroll;
                        */
               display: flex;
              }
              .slides-pager{
                
                width: auto;
                height: 20px;
                /*background-color: yellow;*/
                position: relative;
                z-index: 100;
                margin-top: -120px;
                /*left: 50%;*/
                /*margin-left: -100px;*/
  
              }
              
              .slides-pager .ball{
              
                 width: 20px;
                 margin:4px;
                 height: 20px;
                 border-radius: 50%;
                 background-color: white;
                 float: left;
              }
  
            </style>
        
          <div class="owl-slides">
            <div class="slides-content" id="slidesContent">
                 <slot id="content"></slot>
            </div> 
          </div>
          
       <div class="slides-pager" id="slidesPager">
          <div class="ball"></div>
       </div>
        
        `;
    }

    toggle(){


    }

}

customElements.define("owl-slides",OwlSlides);